<template>
  <div class="summary-container">
    <el-scrollbar wrap-class="scrollbar-wrapper" v-loading="loading">
      <el-card style="margin-bottom: 20px">
        <template #header>今日数据概况</template>

        <div style="display: flex; flex-wrap: wrap">
          <div class="summary-item" v-for="(item, index) in summaryData" :key="index">
            <div :class="item.iconClass" style="width: 40px; height: 40px"></div>
            <div class="summary-content">
              <div class="summary-number">{{ item.number }}</div>
              <div class="summary-label">{{ item.label }}</div>
            </div>
          </div>
        </div>
      </el-card>

      <el-card style="margin-bottom: 20px">
        <template #header>今日对话和访客趋势</template>
        <div id="mainEchart"></div>
      </el-card>

      <el-card style="margin-bottom: 20px">
        <template #header>客服监控</template>

        <!-- 分页表单 -->
        <div class="pagination-form">
          <el-table :data="tableData" style="width: 100%" height="300">
            <el-table-column prop="userId" label="序号" />
            <el-table-column prop="nickname" label="昵称" />
            <el-table-column prop="status" label="状态" />
            <el-table-column prop="roleCategory" label="客服" />
            <el-table-column prop="group" label="所在小组" />
            <el-table-column prop="jobNumber" label="工号" />
            <el-table-column prop="uncompletedCount" label="正在对话数" />
            <el-table-column prop="completedCount" label="已完成对话数" />
            <el-table-column prop="loginDuration" label="在线时长" />
            <el-table-column prop="goodAppraiseCount" label="好评数" />
            <el-table-column prop="goodAppraiseRate" label="好评率" />
            <el-table-column label="操作" prop="options">
              <template #default="scope">
                <el-button
                  type="text"
                  @click="handleAction(scope.row)"
                  v-show="scope.row.status == '启用'"
                  >操作</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pagination.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            style="padding-top: 10px"
          ></el-pagination>
        </div>
      </el-card>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  getUserMessageBySessionId,
  getTodayStatistics,
  Kick,
  GetVisitorAndSessionStatistics,
  GetTodayKefuStatistics,
} from "@/api/node-admin-api/chat.js";
// import * as echarts from "echarts";
import { successMessage, warnMessage, errorMessage } from "@/utils/message";

const summaryData = ref([
  { key: "completed_count", iconClass: "icon-completed", number: 0, label: "已完成对话数" },
  { key: "session_count", iconClass: "icon-today", number: 0, label: "今日对话数" },
  { key: "message_count", iconClass: "icon-total", number: 0, label: "今日消息总数" },
  { key: "response_time", iconClass: "icon-total", number: 0, label: "平均对话首次响应时长" },
  { key: "good_appraise_rate", iconClass: "icon-evaluation", number: 0, label: "平均好评率" },
  { key: "good_appraise_count", iconClass: "icon-evaluation", number: 0, label: "好评数" },
  { key: "appraise_count", iconClass: "icon-rate", number: 0, label: "评价数" },
]);

onMounted(() => {
  getgetTodayStatistics();
  fetchData();
  getechartData();
});

const loading = ref(false);
const getgetTodayStatistics = () => {
  loading.value = true;
  getTodayStatistics()
    .then((res) => {
      if (res.code == 20000) {
        const list = summaryData.value;
        list[0].number = res.result?.completed_count || 0;
        list[1].number = res.result?.session_count || 0;
        list[2].number = res.result?.message_count || 0;
        list[3].number = res.result?.response_time || 0;
        list[4].number = res.result?.good_appraise_rate || 0;
        list[5].number = res.result?.good_appraise_count || 0;
        list[6].number = res.result?.appraise_count || 0;
        summaryData.value = [...list];
      }
    })
    .catch((e) => {
      console.log(e);
      errorMessage(e.message);
    })
    .finally((res) => {
      loading.value = false;
    });
};
// const myChart = ref(null);
// myChart.value = echarts.init(document.getElementById("mainEchart"));

const getechartData = () => {
  loading.value = true;
  GetVisitorAndSessionStatistics()
    .then((res) => {
      console.log("res: ", res);
    })
    .catch((e) => {
      errorMessage(e.message);
    })
    .finally((res) => {
      loading.value = false;
    });
};

// const getechartData = () => {
//   loading.value = true;

//   GetVisitorAndSessionStatistics()
//     .then((res) => {
//       if (res.code == 20000) {
//         myChart.value.setOption({
//           title: {
//             text: "",
//           },
//           tooltip: {},
//           xAxis: {
//             data: res.data.result.filter((o) => o.timeHour),
//           },
//           yAxis: {},
//           series: [
//             {
//               data: res.data.result.filter((o) => o.visitorCount),
//               type: "line",
//               stack: "x",
//               areaStyle: {},
//             },
//             {
//               data: res.data.result.filter((o) => o.visitorCount),
//               type: "line",
//               stack: "x",
//               areaStyle: {},
//             },
//           ],
//         });
//       }
//     })
//     .catch((e) => {
//       errorMessage(e.message);
//     })
//     .finally((res) => {
//       loading.value = false;
//     });
// };

const tableData = ref([]);

const pagination = ref({
  page: 1,
  limit: 20,
  total: 100,
});

const handleSizeChange = (newSize) => {
  pagination.value.limit = newSize;
  fetchData();
};

const handleCurrentChange = (newPage) => {
  pagination.value.page = newPage;
  fetchData();
};

const fetchData = () => {
  loading.value = true;
  GetTodayKefuStatistics(pagination.value)
    .then((res) => {
      if (res.code == 20000) {
        tableData.value = res.data.result || [];
      }
    })
    .catch((e) => {
      errorMessage(e.message);
    })
    .finally((res) => {
      loading.value = false;
    });
};

const handleAction = (row) => {
  loading.value = true;
  Kick({ userid: row.userId })
    .then((res) => {
      if (res.code == 20000) {
        successMessage("强制下线成功!");
        fetchData();
      }
    })
    .catch((e) => {
      errorMessage(e.message);
    })
    .finally((res) => {
      loading.value = false;
    });
};
</script>

<style scoped>
.summary-container {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  background-color: #f9f9f9;
}

.summary-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 10px;
  min-width: 200px;
}

.summary-item .icon-completed {
  background-color: #ff4d4f;
}

.summary-item .icon-today {
  background-color: #1890ff;
}

.summary-item .icon-total {
  background-color: #40a9ff;
}

.summary-item .icon-evaluation {
  background-color: #52c41a;
}

.summary-item .icon-rate {
  background-color: #faad14;
}

.summary-item > div {
  border-radius: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 20px;
  margin-right: 10px;
}

.summary-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.summary-number {
  font-size: 24px;
  font-weight: bold;
}

.summary-label {
  font-size: 14px;
  color: #888;
}
</style>
